<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

	<!-- 全局js -->
	<script src="/js/jquery.min.js"></script>
	<script src="/js/bootstrap.min.js"></script>	
	<!-- 记住密码js -->
	<script src="/js/jquery-cookie.js"></script>
	<script src="/js/jquery.base64.js"></script>
	<!-- 自定义js -->
	<script src="/js/content.js?v=1.0.0"></script>
	<script src="/js/validate.js"></script>
	<script type="text/javascript" src="/js/cookie.js"></script>
	<!-- jQuery Validation -->
	<script src="/js/plugins/validate/jquery.validate.min.js"></script>
	<script src="/js/plugins/validate/messages_zh.min.js"></script>
	<script src="/js/plugins/layer/layer.min.js"></script>
	<!-- 滑动拼图 -->
	<!-- script src="/js/jigsaw.js"></script -->
	<!-- CSS -->
	<link rel="stylesheet" href="/css/layui.css" type="text/css">
	<link rel="stylesheet" href="/css/jigsaw.css" type="text/css">
	<link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<link href="/css/style.css" rel="stylesheet" type="text/css" />
	
<title>Login</title>
</head>
  
<style>
 	.container {
      width: 95%;
      margin: 30px 5px 15px;
    }
   
    #msg {
      width: 100%;
      line-height: 40px;
      font-size: 14px;
      text-align: center;
    }
    
   
     a:link,a:visited,a:hover,a:active {
      margin-left: 0px;
      color: #0366D6;
    }
	.word{
		color:white;
		
		text-align:center;
		margin-top:25%;
		font-family: Arial;
	}
	.btn-block1{
		display:block;
		width:15%;
		margin:0 auto;
		margin-top:5%;
		color:black;
		background-color:#fff;
		border-color:#ffffff;
		border-radius:5px;
	}
    .banquan_footer{
        height: 45px;
        line-height: 20px;
        position: fixed;
        bottom: 0;
        width: 100%;
        text-align: center;
      
        color: #fff;
        font-family: Arial;
        font-size: 14px;
        letter-spacing: 1px;
        margin-top:500px;
        
    }
     body{

		 background-image: url("/img/background_login.jpg");
		 height:auto;
        
        
    }
	label.error{
	   margin-left: 15%;
	   margin-top:1%
	
	}
	a:visited {
		color:#FFFFFF;
		text-decoration:none;
	}
	.myModal-header{
    padding:6px 10px 6px 20px;
    background-color:#007DCF;
    border:0px;
    height:30px;
	}
	 
	.myModal-body{
	    padding:30px 40px 30px 40px;
	    background-color:#1E253F;
	    border-left:1px solid #007DCF;
	    border-right:1px solid #007DCF;
	}
	 
	
	
	.myModal-input{
	    background-color:#1E253F;
	    border:1px solid #007DCF
	}
	 

</style>
<body>
<div>
   
	<div style="background-color:white;">
	    <img alt="ding" src="/img/pic-nav-Colorful strip.png" style="display:block;padding:0;">
	</div>
	 
	<!-- 主体 -->
	<div class="word">
	   <h1 set-lan="html:login_title1">知识就是力量</h1>
	   <h4 set-lan="html:login_title2" style="margin-top:2%;">努力才有机会</h4>
	     
	</div>
	<!--<div class="layui-form-item" style="font-size: 15px;">
		<label class="layui-form-label" style="margin-left: 42%;width:100px"  set-lan="html:login_language">语言选择</label>
		<div class="layui-input-inline" style="width:auto">
			<select class="form-control" name="city" lay-verify="" id="language">
			  <option value="cn">中文</option>
			  <option value="en">English</option>
			</select> 
		</div>
	</div>-->
   
    <button class="btn btn-primary btn-lg btn-block1" data-toggle="modal" data-target="#myModal" value="立即登录"  set-lan="html:login_button">立即登录</button>
    
    <!-- 模态框（Modal） -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
	    <div class="modal-dialog"style="width:30%;margin-top:15%;">
	        <div class="modal-content" style="border-radius:15px;">
	            <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	                <h4 class="modal-title" id="myModalLabel"  set-lan="html:login_title5">登录账号</h4>
	            </div>
	            <div class="modal-body">
	            
	            <form id="signupForm">
	                    
	                    <!-- 登录 -->
	                    <div style="margin-top:5%;height:20px;">
	                   		 <span style="float:left;margin-top:2%;"  >用户名：</span>
	                         <input style="width:80%;float:left;border-radius:5px;margin-left: 5px" type="text" id="username" name="username" class="form-control uname" placeholder="请输入教师编号或学号" /><br/>
	                    </div>
	                    
	                    <div style="padding-top:9%;">
	                        <span style="float:left;margin-top:2%;" > 密码：</span>
	                        <input type="password" id="password" name="password" style="width:80%;float:left;border-radius:5px;margin-left: 18px" class="form-control pword m-b" placeholder="请输入密码" />
	                    </div>

						<div style="padding-top: 12%;height: 50px;" >
						<span class="" style="float: left;margin-top: 2%">验证码：</span>
						<span class="" style="float: left;margin-left: 5px">
							<input class="form-control" type="text" id="verifyCode" name="verify_code" maxlength="4" style="border-radius: 5px">
							<span class="error" style="display: inline;"></span>
						</span>
						<span class="field vcode" data-type="vcode" style="height: 50px">
							<img  width="150" id="verify_code_img" height="32" src="/getImg" onclick="javascript:changeImg()">
							<a href="#" class="doc-color-link desc" onclick="javascript:changeImg()" ><font style="color: #0e9aef;font-size: small">看不清，换一个？</font></a>
						</span>
						</div>

	                    <button class="btn btn-primary btn-block"style="margin-top:15%" >登录</button>
	                    
	                </form>
	            
	            
	            </div>
	           
	        </div><!-- /.modal-content -->
	    </div><!-- /.modal -->
	</div>
	    
 <!--  -->
    <!-- 版权 -->
    <div class="banquan_footer">
        <a href="#" style="text-decoration:underline;margin-top:10px;">用户协议</a>
        | <a href="#" style="text-decoration:underline;">隐私条款</a>
        <p style="height:10px">Copyright©2020 CTMS</p>
        <img alt="底部" src="/img/pic-bottom--Colorful strip.png" style="height:50%;width:100%">
    </div>
  </div>  
</body>

<!-- 语言切换 -->
<script src="js/appjs/sys/language.js"></script>
<script type="text/javascript">
	function changeImg(){
		var img = document.getElementById("verify_code_img");
		img.src = "/getImg?date=" + new Date();
	}
	function checkVerify() {
		var temp = null;
		//获取用户输入的验证码
		var verifyCode = $("#verifyCode").val();
		$.ajax({
			type : "POST",
			//请求后台接口
			url : "/checkVerify",
			data : {
				"verifyCode" : verifyCode
			},
			async : false,
			//请求成功后对返回值进行处理
			success : function (result) {
				if (result == "true") {
					temp = "true";
				}else {
					temp = "false";
				}
			}
		});
		return temp;
	}
$(document).ready(function () {
	   // $("#login").on('click',function(){$("#signupForm").submit();});
	    validateRule();
	    $("body").keydown(keyDownLogon);

	});

	function keyDownLogon(){
	    if (event.keyCode == "13") {
	        $("#login").trigger('click');
	    }
	}

	$.validator.setDefaults({
	    //表单验证成功后执行
	    submitHandler : function() {
			login();
	    }
	});


function login() {
	var result = checkVerify();
	if (result == "false" || result == null) {
		layer.msg("验证码错误");
	}else {
		var userName = $('#username').value;
		var userPass = $('#password').value;
		//判断是否选中复选框，如果选中，添加cookie
		if($("#remember_me").prop("checked") == true){
			//添加cookie，调用cookie.js中方法
			setCookie();
			//alert("记住密码登录");
		}
		// if($("#msg").html() == "验证成功！"){
		if($("#agree").prop("checked") == false){
			alert("请勾选【我已阅读并同意《协议》】");
		}else{
			$.ajax({
				type : "POST",
				url : "/login",
				data : $('#signupForm').serialize(),
				success : function(r) {
					if (r.code == 0) {
						parent.location.href = '/index';
					} else {
						layer.msg(r.msg);
					}
				}
			});
		}
	}

}	

   

function validateRule() {
     var icon = "<i class='fa fa-times-circle'></i> ";
     $("#signupForm").validate({
         rules: {
             username: {
                 required: true
             },
             password: {
                 required: true
             }
         },
         messages: {
             username: {
                 required: icon + "请输入您的用户名"
             },
             password: {
                 required: icon + "请输入您的密码"
             }
         }
     })
 }

</script>
  
</html>